<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .left,
    .right,
    .middle {
        float: left;
    }

    .left,
    .right {
        border: 1px solid black;
        width: 100px;
        height: 200px;
        line-height: 28px;
        cursor: pointer;
        text-align: center;
        /* display: flex;
        justify-content: center;
        flex-direction: column; */
    }

    .active {
        background-color: red;
        border: 1px solid black;
    }
    .left div,.right div{
        border: 1px solid black;
        /* height: 10%; */
    }

</style>
</head>

<body>
    <div class="left">
        <div class="active">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        
    </div>
    <div class="middle">
        <input type="button" value="添加到右边" />
        <input type="button" value="添加到左边" />
    </div>
    <div class="right">

    </div>

    <script>
        // 获取元素
        var left = document.querySelector(".left");
        var inputLeft = document.querySelectorAll("input")[0];
        var inputRight = document.querySelectorAll("input")[1];
        var right = document.querySelector(".right");

        // 给div绑定点击事件
        var leftList = document.querySelectorAll(".left div");
        var rightList = document.querySelectorAll(".right div");
        var divList = [...leftList,...rightList];
        divList.forEach (function(item){
            item.onclick = function(){
                item.className = "active";
            }
        })  ;
        inputLeft.onclick = function(){
          var activeLift =  document.querySelectorAll(".left .active");
        //   activeLift.forEach(function(item){           
        //         item.className = "";
        //         right.appendChild(item)
        //         
        //     })
            activeLift.forEach(item =>{
                item.className = "";
                right.appendChild(item);
            })           
        };
        inputRight.onclick=() => {
            var activeRight = document.querySelectorAll(".right .active");
            activeRight.forEach(item=>{
                item.className = "";
                left.appendChild(item);
            })
        };
       
    </script>
</body>

</html>